import { useState, useEffect, useMemo, useContext } from 'react';
import {
    ConfigProvider,
    Layout,
    theme,
} from 'antd';
import { useAppContext } from '@/context/AppContext';
import "@/i18n/i18n" // 初始化自定义国际化
import { BrowserRouter } from 'react-router-dom';
import {
    Content,
    Header,
    Side
} from '@/components';

const App = () => {
    const [headerClass, setHeaderClass] = useState('darkTheme');
    const [currentTheme, setCurrentTheme] = useState('dark');
    const { config, themeChange, handleLanguageChange, handleMenuSelect, flexNum } = useAppContext();
    useEffect(() => {
        const simulateEvent = async () => {
            if (config) {
                themeChange?.(config.theme);
                await handleLanguageChange?.(config.language);
                handleMenuSelect?.('home');
                setHeaderClass(config.theme === 'light' ? 'light' : 'dark');
            }
        };
        simulateEvent();
    }, []);
    // 监听主题变化
    const themeConfig = useMemo(() => {
        return config?.theme === 'light'
            ? {
                algorithm: theme.defaultAlgorithm,
                token: { colorPrimary: '#1890ff' },
            }
            : {
                algorithm: theme.darkAlgorithm,
                token: { colorPrimary: '#177ddc' },
            };
    }, [config]);
    if (!config) {
        return <div>Loading...</div>
    }
    // 设置菜单缩放的栅格比例
    return (
        <ConfigProvider
            theme={themeConfig}
        >
            <BrowserRouter>
                <Layout
                    style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}
                >
                    <Layout.Header
                        className={headerClass}
                        style={{
                            flex: 1,
                            padding: 0,
                            borderBottom: '1px solid #f0f0f0',
                        }}
                    >
                        <Header />
                    </Layout.Header>
                    <Layout hasSider style={{ flex: 99, width: '100%', display: 'flex' }}>
                        <Side />
                        <Content />
                    </Layout>
                </Layout>
            </BrowserRouter>
        </ConfigProvider >
    );
}

export default App;
